<template>
  <div class="resource">
    <wh-boot
      :queryConfig="queryConfig"
      :tableLoadong="tableLoadong"
      :queryParams="queryParams"
      @submitForm="submitForm"
      :buttonConfig="buttonConfig"
      @handleAall="handleAall"
      :heigth="heigth"
      :tagColor="{
            0: 'danger',
            1: 'success'
          }"
      :maxHeight="maxHeight"
      :border="border"
      label-width="auto"
      :tableConfig="tableConfig"
      :dataList="dataList"
      :listQuery="listQuery"
      :paginationShow="paginationShow"
      @submitTable="submitTable"
      @submitDialog="submitDialog"
    >
    </wh-boot>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

import { getResourcePages, changeState } from '@/services/course'
export default Vue.extend({
  name: 'CourseIndex',
  data () {
    return {
      queryParams: {
        // textarea: ''
      },
      tableLoadong: false,
      queryConfig: [{
        name: 'name',
        label: '课程名称：'
      },
      {
        name: 'status',
        label: '状态：',
        type: 'select',
        options: [
          {
            value: undefined,
            label: '全部'
          },
          {
            value: '1',
            label: '上架'
          },
          {
            value: '0',
            label: '下架'
          }
        ]
      },
      {
        type: 'button',
        name: 'button',
        labelWidth: '0px',
        options: [
          {
            key: 'query',
            name: 'query',
            type: 'primary',
            size: 'medium',
            label: '查询'
          },
          {
            key: 'resetForm',
            size: 'medium',
            label: '重置',
            type: '-',
            name: 'resetForm'
          }
        ]
      }],
      buttonConfig: [
        {
          popup: 'url',
          position: 'top',
          icon: 'el-icon-plus',
          type: '-',
          label: '新增课程',
          name: 'coursesNew',
          order: 1
        }
      ],
      tableConfig: [
        {
          type: 'index',
          name: 'index',
          label: '编号'
        },
        {
          name: 'courseName',
          label: '课程名称'
        },
        {
          name: 'price',
          label: '价格'
        },
        {
          name: 'sortNum',
          label: '排序'
        },
        {
          name: 'status',
          label: '状态',
          type: 'tagAll',

          map: {
            0: '无效',
            1: '有效'
          }
        },
        {
          width: '280',
          label: '操作',
          name: 'button',
          type: 'button',

          options: [
            {
              popup: 'confirm',
              label: '上架',
              plain: '0',
              type: 'success',
              name: 'add'
            },
            {
              popup: 'confirm',
              label: '下架',
              plain: '0',
              type: 'danger',
              name: 'del'
            },
            {
              popup: 'url',
              label: '编辑',
              plain: '0',
              type: '-',
              name: 'coursesNew'
            },
            {
              popup: 'url',
              label: '内容管理',
              plain: '0',
              type: '-',
              name: 'coursesSections',
              order: 1
            },
            {
              type: 'dropdownItem',
              visibilityAll: (item: any, row: any) => {
                if (['上架', '下架'].includes(item.label)) {
                  return (row.status === 0 && item.label === '上架') ||
                   (row.status === 1 && item.label === '下架')
                }
                return true
              }
            }

          ]
        }
      ],
      listQuery: {
        page: 1,
        pageSize: 5,
        pageCount: 10
      },
      dataList: [],
      heigth: '300px',
      maxHeight: '500px',
      border: false,
      paginationShow: true
    }
  },
  created () {
    this.querys()
  },
  methods: {
    async querys (loading?: Function) {
      this.tableLoadong = true
      try {
        const { data } = await getResourcePages({ ...this.queryParams, pageSize: this.listQuery.pageSize, currentPage: this.listQuery.page })
        loading && loading('0', 'disabled')
        this.dataList = data.records
        this.listQuery.pageCount = data.total
      } catch (error) {
        console.log(error)
      }

      this.tableLoadong = false
    },

    submitForm (item: any, row: any, Loading: any) {
      if (item === 'resetForm') {
        this.listQuery.page = 1
        console.log(this.queryParams)
      }
      Loading && Loading('1', 'disabled')
      this.querys(Loading)
      // console.log(item, row)
      // setTimeout(() => Loading('0'), 500)
    },
    handleAall (item: any, row: any, Loading: any) {
      if (item.popup === 'confirm') {
        this.confirmShow(item, row)
      } else if (item.popup === 'url') {
        this.$router.push({ name: item.name })
      }
    },
    submitTable (item: any, row: any, index: any) {
      if (item === 'query') {
        this.querys()
      } else if (item.popup === 'url') {
        this.$router.push({ name: item.name, params: { id: row.id }, query: { id: row.id } })
      } else if (item.popup === 'confirm') {
        this.confirmShow(item, row)
      }
    },
    async submitDialog (item: any, row: any, Loading: any) {
    //   console.log(row)
    //   Loading('1')
    //   try {
    //     const { mesg } = await saveOrUpdate(row) as any
    //     this.$message.success(mesg)
    //     this.querys()
    //   } catch (error) {
    //     console.log(error)
    //   }

    //   Loading('0')
    },

    confirmShow (item: any, row: any) {
      // 普通弹窗
      this.$confirm(`确定${item.label}吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const { mesg } = await changeState({ courseId: row.id, status: row.status === 0 ? 1 : 0 }) as any
          this.$message.success(mesg)
          this.querys()
        })
        .catch(error => {
          console.info(error)
          this.$message('已取消')
        })
    }
  }
})
</script>

<style lang="scss" scoped>

</style>
